<template>
  <a-tooltip placement="bottom">
    <template slot="title">
      <span>背景色</span>
    </template>
    <div class="font-icon-wrapper">
      <span :class="['iconfont', 'font-icon', {'font-icon-disabled': disabled}]" :style="iconStyle" @click="open">&#xe655;</span>
      <el-color-picker show-alpha :predefine="predefineColors" class="design-font-color"
                       popper-class="ignore-event-for-design-table" ref="picker"
                       style="background: white; border-radius: 4px; margin-left: 10px"
                       @mousedown.stop v-model="innerValue" :disabled="disabled" size="mini"/>
    </div>
  </a-tooltip>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import $ from 'jquery';

export default {
  name: 'BackgroundColor',
  model: createModelForVue(),
  props: {
    selection: createProps(Object, undefined),
    value: createProps(String),
    disabled: createProps(Boolean),
  },
  data() {
    return {
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    };
  },
  methods: {
    open() {
      $(this.$refs.picker.$el).find('.el-color-picker__trigger').trigger('click');
    },
  },
  computed: {
    iconStyle() {
      return {
        '--border-color': this.value,
      };
    },
    innerValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('change', v);
        this.selection && this.selection.setStyle && this.selection.setStyle('background', v);
      },
    }
  }
};
</script>
<style scoped>
.font-icon {
  color: white;
  border-bottom: 5px solid var(--border-color);
  padding: 0 5px;
  font-size: 12px;
}
</style>
<style>
.design-font-color {
  position: absolute;
  bottom: -20px;
  left: 0;
}

.design-font-color,
.design-font-color .el-color-picker__mask,
.design-font-color .el-color-picker__trigger,
.design-font-color .el-color-picker {
  height: 0 !important;
  display: none;
}

.font-icon {
  position: absolute;
  left: 5px;
  cursor: pointer;
  font-size: 14px;
}

.font-icon-wrapper {
  height: 100%;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
}

.font-icon-disabled {
  color: #707070 !important;
  border-bottom: 5px solid #707070 !important;
  cursor: not-allowed;
}
</style>